<script setup lang="ts">
/**
 * * 优化过后的分页插件
 * * 只需要吧本系统中的 Page类型对象传入
 * * 以及用于刷新页面数据的函数传入
 * * 就能够得到一个 分页组件
 */
import type { Page } from '@/types'

defineProps<{
  page: Page<any>
  getPageData: () => void
}>()
</script>

<template>
  <div class="pager">
    <el-pagination
      small
      @size-change="getPageData"
      @current-change="getPageData"
      @prev-click="getPageData"
      @next-click="getPageData"
      v-model:current-page="page.num"
      v-model:page-size="page.size"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.count"
    >
    </el-pagination>
  </div>
</template>

<style lang="less" scoped>
.pager {
  display: flex;
  margin-top: 20px;
  justify-content: flex-end;
}
</style>
